<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/teacher/notices'}">教师</el-breadcrumb-item>
      <el-breadcrumb-item>学生课题管理</el-breadcrumb-item>
      <el-breadcrumb-item>查看指导学生</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图区域-->
    <el-card> 
      <el-table :data="studentList" style="width: 90%; margin-left:5%" stripe>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" align="center" class="demo-table-expand">
              <el-form-item  label="学生学号"><span>{{ props.row.id }}</span></el-form-item>
              <el-form-item label="学生姓名"><span>{{ props.row.name }}</span></el-form-item>
              <el-form-item label="所属学院"><span>{{ props.row.college }}</span></el-form-item>
              <el-form-item label="所属系别"><span>{{ props.row.dept }}</span></el-form-item>
              <el-form-item label="所在班级"><span>{{ props.row.clazz }}</span></el-form-item>
              <el-form-item label="联系电话"><span>{{ props.row.phone }}</span></el-form-item>
              <el-form-item label="联系邮箱"> <span>{{ props.row.email }}</span></el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column align="center" label="学生学号" prop="id"></el-table-column>
        <el-table-column align="center" label="学生姓名" prop="name"></el-table-column>
        <el-table-column align="center" label="联系电话" prop="phone"></el-table-column>
        <el-table-column align="center" label="移除">
          <template slot-scope="scope" >
            <el-button type="danger" icon="el-icon-delete" circle @click="removeStudent(scope.row.id, scope.row.name)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
  import {getStudentListByTeacher, removeGuideStudent} from '../../axios/teacher'
  export default {
    name: 'TeacherViewStudents',
    data(){
      return {
        // 该教师指导的学生列表
        studentList: []
      }
    },
    methods:{
      getStudentList(){
        // 有后端
        getStudentListByTeacher().then(res => {
          if(res.success){
            this.studentList = res.data
          }  
        })

        // 无后端
        // this.studentList = [
        //   {
        //     id: '5098018001',
        //     name: '张三',
        //     collage: '信工',
        //     dept: '计算机科学与技术',
        //     clazz: '计软181',
        //     phone: '18897991030',
        //     email: '18897991030@qq.com',
        //     admissionDate: '2018-09-02'
        //   },
        //   {
        //     id: '5098018002',
        //     name: '李四',
        //     collage: '信工',
        //     dept: '计算机科学与技术',
        //     clazz: '计软182',
        //     phone: '18897991032',
        //     email: '18897991032@qq.com',
        //     admissionDate: '2018-09-02'
        //   },
        //   {
        //     id: '5098018003',
        //     name: '王五',
        //     collage: '信工',
        //     dept: '计算机科学与技术',
        //     clazz: '计软183',
        //     phone: '18897991033',
        //     email: '18897991033@qq.com',
        //     admissionDate: '2018-09-02'
        //   } 
        // ]
      },
      removeStudent(id, name){
        this.$confirm('确认移除学生 ' + name +' (' + id +')吗?', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then( () => { 
          // 此时发送后端请求，保存录入信息
          removeGuideStudent(id).then(res => {
            if(res.success){
              // this.$message.success('添加成功') 
              this.getStudentList()
            }
         })   
        }).catch(() => {  
          this.$message.info('已取消提交!');   
        }) 
      }
    },
    created(){
      this.getStudentList()
    }
  }
</script>

<style scoped>
  .demo-table-expand {
    margin-left: 100px;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf; 
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>